<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加人员</title>
    {% load static %}
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/oksub.css">
    <script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
    <script src="/static/lib/layui/layui.js"></script>

    <link type="text/css" rel="stylesheet" href="/static/css/metroStyle.css">
    <link type="text/css" rel="stylesheet" href="/static/css/treeSelectStyle.css">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/static/js/treeSelect.2.0.js"></script>
    <script type="text/javascript" src="/static/js/xm-select.js"></script>
    <script type="text/javascript" src="/static/js/xeutils.js"></script>
</head>

<body>
    <div class="ok-body">
        <!--form表单-->
        <form class="layui-form layui-form-pane ok-form">
            {% csrf_token %}
            <div class="layui-row layui-col-space10">

                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">员工姓名<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入员工姓名！" autocomplete="off" class="layui-input"
                            lay-verify="required">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">

                    <label class="layui-form-label">所属角色<span style="color: red">*</span></label>
                    <div class="layui-input-block" name="has_role" id="has_role">

                    </div>

                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">邮箱<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="email" placeholder="请输入序号！(正整数)" autocomplete="off" class="layui-input"
                            lay-verify="required|email">
                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">手机号<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input"
                            lay-verify="required|phone">
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space10" style="padding-top: 10px;">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">所属部门<span style="color: red">*</span></label>
                    <div class="layui-input-block" name="has_dept" id="has_dept">

                    </div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">员工性别<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="gender" value="0" title="男">
                        <input type="radio" name="gender" value="1" title="女">
                    </div>
                </div>
            </div>
    <div class="layui-form-item layui-form-text" style="padding-top: 10px;">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="请输入备注内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="close">关闭</button>
        </div>
    </div>
    </form>
    </div>
    <!--js逻辑-->
    <script>
        layui.config({
            base: '/static/lib/layui/lay/tree_select/'
        }).use(["form", "okUtils", "form", "tree", "okLayer"], function () {

            let $ = layui.$;
            let form = layui.form;
            let okUtils = layui.okUtils;
            let okLayer = layui.okLayer;
            let tree = layui.tree;
            let util = layui.util;
            okLoading.close();
            $("#close").click(function () {
                let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                parent.layer.close(index);
    
            });
            // 这里得把switch的状态弄对，不然，如果他创建就停用，数据就传不过去了
            form.on("submit(add)", function (data) {
                okUtils.ajax("{% url 'system:addUserData' %}", "post", data.field, true).done(function (response) {
                    okLayer.greenTickMsg(response.msg, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }).fail(function (error) {
                    // 这里已经有提示了
                });
                return false;
            });

        });
    </script>
    <script type='text/javascript'>
        var demo3 = xmSelect.render({
            el: '#has_role',
            model: { label: { type: 'text' } },
            name:'role',
            radio: true,
            clickClose: true,
            layVerify: 'required',
            paging: true,
            pageSize: 5,
            prop: {
                name: 'name',
                value: 'id',
            },
            tree: {
                show: false,
                strict: false,
            },
            height: 'auto',
            data() {
                return []
            }
        });
        $.ajax({
            url: "{% url 'system:getRoleData' %}",
            type: "GET",
            success: function (ret) {
                var node = ret;
                demo3.update({
                    data: node.data,
                    autoRow: true,
                })
            },
            error: function () {
            }
        });
    </script>
    <script type='text/javascript'>
        var demo2 = xmSelect.render({
            el: '#has_dept',
            name:'dept',
            model: { label: { type: 'text' } },
            layVerify: 'required',
            radio: true,
            clickClose: true,
            prop: {
                name: 'title',
                value: 'id',
            },
            tree: {
                show: true,
                strict: false,
                expandedKeys: [-1],
            },
            height: 'auto',
            data() {
                return []
            }
        });
        $.ajax({
            url: "{% url 'system:getDeptDataTree' %}",
            type: "GET",
            success: function (ret) {
                var node = ret;
                demo2.update({
                    data: XEUtils.toArrayTree(node.data,{ id:'id',parentKey: 'parent', strict: true, children:'children' }),
                    autoRow: true,
                })
            },
            error: function () {
            }
        });
    </script>
</body>

</html>